<template>
  <div class="details">
    <!-- 校历 -->
    <div style="text-align:center;font-size:16px;">
      <el-button style="font-size:18px;">
        <i class="el-icon-arrow-left" @click="getPrev"></i>
      </el-button>
      <el-button style="font-size:18px;">{{ now.getFullYear() }}年{{ now.getMonth() + 1 }}月</el-button>
      <el-button style="font-size:18px;">
        <i class="el-icon-arrow-right" @click="getNext"></i>
      </el-button>
      <el-button @click="getNow" style="font-size:18px;">今天</el-button>
    </div>
    <br />
    <ul class="title">
      <li>日</li>
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
      <!-- <li>周次</li> -->
    </ul>
    <div class="content">
      <ul class="contents">
        <li
          style="background:rgb(219, 216, 216);"
          v-for="(d, index) in beforeDates"
          :key="'bf' + index"
        >{{ d }}</li>
        <li
          v-for="(d, index) in totalDates"
          :key="index"
          :class="{
            active:
              today === d &&
              now.getMonth() === new Date().getMonth() &&
              now.getFullYear() === new Date().getFullYear()
          }"
          @click="getDate(now.getFullYear(), now.getMonth() + 1, d)"
        >
          <p>{{ d }}</p>
          <br />
          <!-- 事件 -->
          <div style="font-size:14px;" v-for="(items, index) in schoolCalendar" :key="'sc' + index">
            <span
              v-show="
                now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + d ===
                  items.date
              "
            >{{ items.things }}</span>
          </div>
        </li>
        <li
          style="background:rgb(219, 216, 216);"
          v-for="(d, index) in afterDates"
          :key="'ad' + index"
        >{{ d }}</li>
      </ul>
      <!-- 周次 -->
      <!-- <ul class="week">
        <li>一</li>
        <li>二</li>
        <li>三</li>
        <li>四</li>
        <li>五</li>
      </ul>-->
    </div>
    <br />
    <br />
    <!-- 标注 -->
    <div style="display: inline;">
      <span>注：</span>
      <span style="display:inline-block;width:10px;height:10px;backgroundColor:skyblue;"></span>
      <span>蓝色表示今天</span>&nbsp;&nbsp;&nbsp;
      <span
        style="display:inline-block;width:10px;height:10px;backgroundColor:white;"
      ></span>
      <span>白色是本月日期</span>
      &nbsp;&nbsp;&nbsp;
      <span
        style="display:inline-block;width:10px;height:10px;backgroundColor:gray;"
      ></span>
      <span>灰色是其他月份</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "schoolCalendarDetails",
  props: {
    schoolCalendar: Array, //校历事件
    semesterDay: Date //获取父组件传过来的学期校历日期
  },
  data() {
    return {
      now: this.semesterDay, //获取学期校历日期
      totalDates: 0, //一个月的天数
      beforeDates: [],
      afterDates: []
    };
  },
  computed: {
    //今天
    today() {
      console.log(this.semesterDay);
      return new Date().getDate(); //获取今天的天数，几号
    }
  },
  created() {
    this.getTotalDates();
    this.getBeforeDates();
    this.getAfterDates();
    this.init();
  },
  methods: {
    //点击单元格，获取目标单元格日期
    getDate(year, month, date) {
      let d = year + "-" + month + "-" + date;
      console.log(d);
    },

    //显示父组件传过来的学期校历
    init() {},

    //点击上个月
    getPrev() {
      this.now.setDate(1);
      this.now.setMonth(this.now.getMonth() - 1);
      this.getTotalDates();
      this.getBeforeDates();
      this.getAfterDates();
    },

    //本月
    getNow() {
      this.now = new Date();
      this.getTotalDates();
      this.getBeforeDates();
      this.getAfterDates();
    },

    //点击下一个月
    getNext() {
      this.now.setDate(1);
      this.now.setMonth(this.now.getMonth() + 1);
      this.getTotalDates();
      this.getBeforeDates();
      this.getAfterDates();
    },

    // 补全本月之前的空格日期
    getBeforeDates() {
      this.beforeDates = [];
      let now = this.now;
      now.setDate(1); //设置当前为当前月的第一天日期
      let ww = now.getDay(); //获取星期几
      for (let i = 0; i < ww; i++) {
        now.setDate(now.getDate() - 1); //前一天
        this.beforeDates.unshift(now.getDate());
      }
      now.setDate(now.getDate() + ww);
      now.setDate(this.semesterDay.getDate());
    },

    //补全本月之后的空格日期
    getAfterDates() {
      this.afterDates = [];
      let now = this.now; //获取当前日期
      now.setDate(this.totalDates); //设置当前为当前月的最后一天
      let ww = now.getDay(); //获取星期几
      for (let i = 0; i < 6 - ww; i++) {
        this.afterDates.push(i + 1);
      }
      now.setDate(this.semesterDay.getDate());
    },

    //显示本月的日期
    getTotalDates() {
      let totalDates = 0;
      let now = this.now; //今天的时间
      let month = now.getMonth(); //当前月份
      let year = now.getFullYear(); //当前年份
      let arr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //月份的天数
      totalDates = arr[month];
      if (
        month === 1 &&
        ((year % 4 === 0 && year % 100 != 0) || year % 400 === 0)
      ) {
        totalDates++;
      }
      this.totalDates = totalDates;
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.details {
  width: 445px;
  padding: 10px;
  text-align: center;
  margin: auto;
  border: 1px solid #f7f7f7;
}
ul li {
  list-style-type: none;
}
.title {
  display: flex;
  width: 420px;
}
.title li {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cccccc;
  background-color: white;
}
.content {
  width: 420;
}
.contents {
  float: left;
  display: flex;
  flex-wrap: wrap;
  width: 420px;
}
.contents li {
  width: 60px;
  height: 60px;
  /* display: flex; */
  align-items: center;
  justify-content: center;
  border: 1px solid #cccccc;
  background-color: white;
}
.contents li.active {
  color: red;
  background-color: skyblue;
}
.contents li:hover {
  background-color: skyblue;
}
.week {
  float: left;
  width: 60px;
}
.week li {
  width: 60px;
  height: 60px;
  border: 1px solid #cccccc;
}
</style>
